<template>
<div class="aa">
 
  <div class="wp">
      <!-- 地址 -->
      <div class="site">
          <h2>
              <p>收货人信息</p>
              <span id="xindizhi" @click="xin">使用新的地址</span>
          </h2>
          <ul id="btn1">
              <li id="sc1" v-if="isshow">
                  <div :class='aa==true?"dizhi":"dizhi1"'>
                      <input type="radio" checked name="dan">
                      <p>但小兵 北京 北京市 昌平区 天通苑明天第一城4号楼101 固定电话010-21541589</p>
                      默认地址
                  </div>
                  <div class="anniu">
                      <span class="shezhi" id="btn3" @click="mrdz">设为默认地址</span>
                      <span>修改</span>
                      <span @click="changeisshow">删除</span>
                  </div>
              </li>
              <li id="sc2" v-if="isshow1">
                  <div :class='bb==true?"dizhi":"dizhi1"'>
                      <input type="radio" name="dan" >
                      <p>但小兵 北京 北京市 昌平区 天通苑明天第一城4号楼101 手机15032203562</p>
                      默认地址
                  </div>
                  <div class="anniu">
                      <span class="shezhi1" id="btn4" @click="mrdz1">设为默认地址</span>
                      <span>修改</span>
                      <span @click="changeisshow1">删除</span>
                  </div>
              </li>
              <li id="sc3" v-if="isshow2">
                  <div :class='cc==true?"dizhi":"dizhi1"'>
                      <input type="radio" name="dan" >
                      <p>但小兵 北京 北京市 昌平区 天通苑明天第一城4号楼101 手机15032203562</p>
                      默认地址
                  </div>
                  <div class="anniu">
                      <span class="shezhi1" id="btn5" @click="mrdz2">设为默认地址</span>
                      <span>修改</span>
                      <span @click="changeisshow2">删除</span>
                  </div>
              </li>
              <li id="sc4" v-if="isshow3">
                  <div :class='dd==true?"dizhi":"dizhi1"'>
                      <input type="radio" name="dan" >
                      <p>但小兵 北京 北京市 昌平区 天通苑明天第一城4号楼101 手机15032203562</p>
                      默认地址
                  </div>
                  <div class="anniu">
                      <span class="shezhi1" id="btn6" @click="mrdz3">设为默认地址</span>
                      <span>修改</span>
                      <span @click="changeisshow3">删除</span>
                  </div>
              </li>
              <li id="sc5" v-if="isshow4">
                  <div :class='ee==true?"dizhi":"dizhi1"'>
                      <input type="radio" name="dan" >
                      <p>但小兵 北京 北京市 昌平区 天通苑明天第一城4号楼101 手机15032203562</p>
                      默认地址
                  </div>
                  <div class="anniu">
                      <span class="shezhi1" id="btn7" @click="mrdz4">设为默认地址</span>
                      <span>修改</span>
                      <span  @click="changeisshow4">删除</span>
                  </div>
              </li>
             
          </ul>
          <div class="site-bo">
              <span class="zhankai" id="zhankai" @click="zhankai">展开其他地址</span>
              <span class="shouqi" id="shouqi" @click="shouqi">收起地址</span>
          </div>
      </div>
      <!-- 商品信息部分 -->
      <div class="goods">
          <h2>商品信息</h2>
          <div class="biao">
              <div class="biao-up">
                  <span>商品名称</span>
                  <span>规格</span>
                  <span>数量</span>
                  <span>金额</span>
              </div>
              <ul v-for="(item,index) in wddds" :key="index">
                <li>
                    <div class="img">
                        <img :src="item.image" alt="">
                        <span>{{item.name}}</span>
                    </div>
                    <p>{{item.price}}</p>
                    <div class="jiajian">
                        <span @click="jian(index)"><img src="./img/jian.jpg" alt=""></span>
                        <span class="shuliang">{{item.age}}</span>
                        <span @click="jia(index)"><img src="./img/jia.jpg" alt=""></span>
                    </div>
                    <span>{{item.jifen}}积分</span>
                </li>
              </ul>
          </div>
          
      </div>
      <!-- 订单备注 -->
      <div class="remark">
          <h2>添加订单备注</h2>
          <input type="text" placeholder="限45个字，请填写有关商品、支付、发票等信息">
      </div>
      <div class="di">
          <h2>
              <span class="p">应付积分:</span>
              <span id="jifen">0</span>
              积分
          </h2>
          <span class="duihuan" @click="chenggong">确认兑换</span>
      </div>
      
  </div>
  <!-- 蒙版 -->
   <div class="aa-wp" id="meng">
     <div class="mengban" >
          <div class="xdizhi">
              <div class="up">
                添加地址
              </div>
              <div class="aul">
                <ul>
                  <li>
                    <span>*<span>收货人姓名：</span></span>
                    <input type="text" placeholder="可以收货人姓名" class="inxm">
                  </li>
                  <li>
                    <span>*<span>所在地区：</span></span>
                     <select id="province" onchange="addCity(this.value);">
                       <option value="-1">--请选择--</option>
                       <option value="0">湖南</option>
                       <option value="1">广东</option>
                       <option value="2">河南</option>
                     </select>
                     <select id="city" onchange="addCounty(this.value);">
                       <option value="-1">--请选择--</option>
                       <option value="0">郑州</option>
                       <option value="1">开封</option>
                       <option value="2">洛阳</option>
                       
                     </select>
                     <select id="county">
                       <option value="-1">--请选择--</option>
                       <option value="0">中原区</option>
                       <option value="1">金水区</option>
                       <option value="2">上街区</option>
                     </select>
                  </li>
                  <li>
                    <span>*<span>详细地址：</span></span>
                      <input type="text" placeholder="用于接受货物的详细地址" class="dzin">
                  </li>
                  <li>
                    <span>*<span>联系电话：</span></span>
                      <input type="text" placeholder="推荐使用手机号" class="in1">
                      <p>或固定电话：</p>
                      <input type="text" placeholder="区号"  class="in2">
                      <p>-</p>
                      <input type="text" placeholder="电话号码" class="in3">
                  </li>
                </ul>
                <div class="chang">
                  <input type="radio" class="in-chang">设置为常用地址
                </div>
              </div>
              <div class="bo">
                <span class="fan" @click="fan">返回</span>
                <span class="bao" @click="bao">保存</span>
              </div>
          </div> 
    </div>
  </div>
</div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    name:'dingdan',
    data(){
        return{
        aa:true,
        bb:false,
        cc:false,
        dd:false,
        ee:false,
        isshow:true,
        isshow1:true,
        isshow2:true,
        isshow3:true,
        isshow4:true,
    }
    },
    computed:{
        ...mapState(['wddds']),
    },
    methods:{
        jia(index) {
            let item = this.wddds[index]
            item.age++;
            item.jifen = item.age * item.jg;
            document.querySelector('#jifen').innerHTML = item.jifen
            },
        jian(index) {
            let item = this.wddds[index]
            if (item.age < 1) {
                alert('数量不能小于0')
                return
            }
            item.age--
            item.jifen = item.age * item.jg;
            document.querySelector('#jifen').innerHTML = item.jifen
        },
        chenggong() {
            this.$router.push('/zhifuwancheng')
        },
        zhankai(){
            document.querySelector('#btn1').style.height = "100%"
            document.querySelector('#zhankai').style.display= "none"
            document.querySelector('#shouqi').style.display= "block"
        },
        shouqi(){
            document.querySelector('#btn1').style.height = "180px"
            document.querySelector('#zhankai').style.display= "block"
            document.querySelector('#shouqi').style.display= "none"
        },
        mrdz(){
            this.aa=true
            this.bb=false
            this.cc=false
            this.dd=false
            this.ee=false
            document.querySelector('#btn4').style.display= "inline-block"
            document.querySelector('#btn5').style.display= "inline-block"
            document.querySelector('#btn6').style.display= "inline-block"
            document.querySelector('#btn7').style.display= "inline-block"
            document.querySelector('#btn3').style.display= "none"
        },
        mrdz1(){
            this.aa=false
            this.bb=true
            this.cc=false
            this.dd=false
            this.ee=false
            document.querySelector('#btn3').style.display= "inline-block"
            document.querySelector('#btn4').style.display= "inline-block"
            document.querySelector('#btn5').style.display= "inline-block"
            document.querySelector('#btn6').style.display= "inline-block"
            document.querySelector('#btn7').style.display= "inline-block"
            document.querySelector('#btn4').style.display= "none"
        },
         mrdz2(){
            this.aa=false
            this.bb=false
            this.cc=true
            this.dd=false
            this.ee=false
            document.querySelector('#btn3').style.display= "inline-block"
            document.querySelector('#btn4').style.display= "inline-block"
            document.querySelector('#btn5').style.display= "inline-block"
            document.querySelector('#btn6').style.display= "inline-block"
            document.querySelector('#btn7').style.display= "inline-block"
            document.querySelector('#btn5').style.display= "none"
        },
         mrdz3(){
            this.aa=false
            this.bb=false
            this.cc=false
            this.dd=true
            this.ee=false
            document.querySelector('#btn3').style.display= "inline-block"
            document.querySelector('#btn4').style.display= "inline-block"
            document.querySelector('#btn5').style.display= "inline-block"
            document.querySelector('#btn6').style.display= "inline-block"
            document.querySelector('#btn7').style.display= "inline-block"
            document.querySelector('#btn6').style.display= "none"
        },
         mrdz4(){
            this.aa=false
            this.bb=false
            this.cc=false
            this.dd=false
            this.ee=true
            document.querySelector('#btn3').style.display= "inline-block"
            document.querySelector('#btn4').style.display= "inline-block"
            document.querySelector('#btn5').style.display= "inline-block"
            document.querySelector('#btn6').style.display= "inline-block"
            document.querySelector('#btn7').style.display= "inline-block"
            document.querySelector('#btn7').style.display= "none"
        },
        changeisshow(){
            if(confirm("确认要删除嘛？")){
                this.isshow = !this.isshow;
                alert('删除成功')
            }
        },
        changeisshow1(){
            if(confirm("确认要删除嘛？")){
                this.isshow1 = !this.isshow1;
                alert('删除成功')
            }
        },
        changeisshow2(){
            if(confirm("确认要删除嘛？")){
                this.isshow2 = !this.isshow2;
                alert('删除成功')
            }
        },
        changeisshow3(){
            if(confirm("确认要删除嘛？")){
                this.isshow3 = !this.isshow3;
                alert('删除成功')
            }
        },
        changeisshow4(){
            if(confirm("确认要删除嘛？")){
                this.isshow4 = !this.isshow4;
                alert('删除成功')
            }
        },
        xin(){
            document.querySelector('#meng').style.display= "inline-block"
        },
        fan(){
            document.querySelector('#meng').style.display= "none"
        },
        bao(){
            document.querySelector('#meng').style.display= "none"
        },
    },
}
</script> 

<style scoped>
/* 蒙版 */
.aa .aa-wp .mengban{
    position: fixed;
    width: 100%;
    height: 1000px;
    background: rgba(155, 155, 155, 0.5);
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aa .aa-wp{
    display: none;
}

.aa .aa-wp .mengban .xdizhi{
  width: 700px;
  height: 460px;
  background: #fff;
  border: 5px #e2e2e2 solid;
}
.inxm{
    width: 320px;
    height: 33px;
    border: 1px solid #d3d3d3;
    padding-left: 10px;
}
.dzin{
    width: 450px;
    height: 33px;
    border: 1px solid #d3d3d3;
    padding-left: 10px;
}
#xindizhi{
    cursor: pointer;
}
.xdizhi .up{
    height: 68px;
    border: 1px #e2e2e2 solid;
    line-height: 68px;
    padding-left: 30px;
    color:  #498e3d;
    font-size:18px;
}
.xdizhi .aul ul li{
    color: #f08200;
    display: flex;
    margin-top: 20px;
}
.xdizhi .aul ul li input{
    font-size: 16px;
    color: #999;
}
.xdizhi .aul ul li>span{
    display: inline-block;
    width: 160px;
    font-size: 18px;
    color: #f08200;
    text-align: right;
}
.aul ul li>span>span{
    color: #333;
    margin-left: 5px;
}
.xdizhi .aul ul li>p{
    font-size: 16px;
    color: #333;
    line-height: 33px;
    margin-left: 5px;
    margin-right: 5px;
}
ul li .in1{
    width: 140px;
    height: 33px;
    border: 1px solid #d3d3d3;
    padding-left: 10px;
}
ul li .in2{
    width: 37px;
    height: 33px;
    border: 1px solid #d3d3d3;
    padding-left: 10px;
}
ul li .in3{
    width: 114px;
    height: 33px;
    border: 1px solid #d3d3d3;
    padding-left: 10px;
}
.chang {
    font-size: 16px;
    color: #333;
}
.chang .in-chang{
    margin-top: 20px;
    margin-left: 160px;
    height: 12px;
    line-height: 12px;
    cursor: pointer;
}
.bo{
    display: flex;
    justify-content: space-evenly;
    margin-top: 30px;
}
.bo span{
    display: block;
    width: 110px;
    height: 35px;
    color: #fff;
    border-radius: 5px;
    text-align: center;
    line-height: 35px;
    cursor: pointer;
}
.bo .fan{
    background: #999999;
}
.bo .bao{
    background: #f08200;
}
/* 地址 */
.aa{
width: 100%;
}
.wp{
    width: 1280px;
    margin: 0 auto;
}
.site>h2{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
.site>h2 p{
    font-size: 18px;
    color: #666;
    font-weight: 100;
}
.site>h2 span{
    display: block;
    font-size: 14px;
    color: #fff;
    background: #f08200;
    border-radius: 5px;
    width: 90px;
    height: 30px;
    line-height: 30px;
    font-weight: 100;
    text-align: center;
}
.site ul{
    height: 180px;
    overflow: hidden;
}
.site ul li{
    display: flex;
    justify-content: space-between;
    background: #f4fff2;
    margin-top: 10px;
    height: 36px;
    line-height: 36px;
}

#btn2{
    color: none;
}
.site ul li .dizhi{
    display: flex;
    font-size: 14px;
    color: #999;
}
.site ul li .dizhi input{
    margin-top: 10px;
    margin-left: 17px;
}
.dizhi p{
    font-size: 14px;
    color: #666;
    margin-left: 10px;
    margin-right: 10px;
}
/*  */
.site ul li .dizhi1{
    display: flex;
    font-size: 14px;
    color: #fff;
}
.site ul li .dizhi1 input{
    margin-top: 10px;
    margin-left: 17px;
}
.dizhi1 p{
    font-size: 14px;
    color: #666;
    margin-left: 10px;
    margin-right: 10px;
}
.anniu{
    font-size: 14px;
}
.anniu span{
    color: #498e3d;
    margin-right: 30px;
    cursor: pointer;
}
.anniu .shezhi{
    color: #f08200;
    display: none;
}
.anniu .shezhi1{
    color: #f08200;
}
.site-bo{
    font-size: 16px;
}
.site-bo .shouqi,.zhankai{
    color: #498e3d;
}
.site-bo .zhankai{
    display: block;
    width: 130px;
    height: 40px;
    line-height: 40px;
    background: url(./img/xiajiantou.jpg) no-repeat 100px 50%;
    cursor: pointer;
}
.site-bo .shouqi {
    display: none;
    width: 130px;
    height: 40px;
    line-height: 40px;
    background: url(./img/shangjiantou.jpg) no-repeat 70px 50%;
    cursor: pointer;
}
/* 商品 */
.goods h2{
    font-size: 18px;
    color: #666;
    margin-top: 20px;
    font-weight: 100;
}
.biao-up{
    display: flex;
    padding-left: 40px;
    padding-right: 40px;
    justify-content: space-between;
    height: 46px;
    background: #f2f2f2;
    line-height: 46px;
}
.biao-up span{
    display: block;
    color: #333;
    font-size: 16px;
}
.biao{
    border: 1px solid #e9e9e9;
}
.biao ul li span{
    display: block;
}
.biao ul li{
    display: flex;
    justify-content: space-between;
    height: 120px;
    line-height: 120px;
    padding-right: 40px;
    padding-left: 40px;
    border-bottom: 1px solid #e9e9e9;
}
.biao ul li>span{
    width: 100px;
    text-align: right;
}
.biao ul li .img{
    display: flex;
}
.biao ul li .img img{
    width: 80px;
    height: 80px;
    margin-top: 20px;
}
.jiajian{
    display: flex;
    justify-content: space-between;
    width: 100px;
    height: 26px;
    border: 1px #d3d3d3 solid;
    margin-top: 47px;
    line-height: 26px;
}
.jiajian span{
    display: block;
    width: 26px;
    height: 26px;
    text-align: center;
}
.jiajian .shuliang{
    width: 46px;
}
.jiajian span img{
    width: 26px;
    height: 26px;
}
/* 备注 */
.remark{
    margin-top: 30px;
    border-top: 1px #d3d3d3 solid;
    border-bottom: 1px #d3d3d3 solid;
    padding-bottom: 20px;
}
.remark input{
    width: 625px;
    height: 35px;
    border: 1px #d3d3d3 solid;
    padding-left: 10px;
    font-size: 14px;
}
.remark h2{
    font-weight: 100;
    font-size: 18;
    color: #666;
    margin-top: 20px;
    margin-bottom: 20px;
}
/* 兑换 */
.di{
    text-align: right;
}
.di h2{
    margin-top: 40px;
    font-size: 22px;
    color: #ff5757;
    font-weight: 100;
}
.di .p{
    font-size: 16px;
    color: #666;
}
.di>span{
    display: inline-block;
    margin-top: 30px;
    width: 150px;
    height: 50px;
    border-radius: 8px;
    background: #f08200;
    text-align: center;
    line-height: 50px;
    color: #fff;
    cursor: pointer;
}
</style>